<template>
  <div class="containt">
  <div class="con_left">
    <div @click="getAlls('')"  :class="checkClass == ''?'checks':'nocheck'">
      <div style="overflow: hidden;width: 15px;height: 15px;display: inline-block;">
        <img src="../../assets/12.png" alt="">
      </div>
      全部
      <div style="float: right;margin-right:10px;;font-size: 14px ">{{ list.all }}</div>
    </div>
    <div @click="getAlls(1)"  :class="checkClass == 1?'checks':'nocheck'">
      <div style="overflow: hidden;width: 15px;height: 15px;display: inline-block">
        <img src="../../assets/发起表单.png" alt="">
      </div>
      发起流程
      <div style="float: right;margin-right:10px;;font-size: 14px ">{{ list.startEd }}</div>
    </div>
    <div @click="getAlls(2)"  :class="checkClass == 2?'checks':'nocheck'">
      <div style="overflow: hidden;width: 15px;height: 15px;display: inline-block">
        <img src="../../assets/images/进行中流程.png" alt="">
      </div>
      进行中流程

      <div style="float: right;margin-right:10px;;font-size: 14px ">{{ list.pending }}</div>
    </div>
    <div @click="getAlls(3)" :class="checkClass == 3?'checks':'nocheck'">
      <div style="overflow: hidden;width: 15px;height: 15px;display: inline-block">
        <img src="../../assets/处理后表单.png" alt="">
      </div>
      已完成流程

      <div style="float: right;margin-right:10px;;font-size: 14px ">{{ list.been }}</div>
    </div>
    <!-- <div @click="getAlls(4)" style="line-height:20px;padding:20px 0 0 20px;font-size:14px;cursor:pointer;">
      <div style="overflow: hidden;width: 15px;height: 15px;display: inline-block">
        <img src="../../assets/images/抄送表单.png" alt="">
      </div>
      抄送流程
      <div style="float: right;margin-right:10px;;font-size: 14px ">{{ list.chaoSong }}</div>
    </div> -->

  </div>
  <div class="con_right">
    <el-form style="margin:20px 0 0 30px;">
      <el-row :span="24">
        <el-col :span="6">
          <el-form-item label="表单名称">
            <el-input v-model="form1.name" autocomplete="off" @blur="getAll" style="width: 250px" size="default" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="报表类型">
            <el-select v-model="form1.templateType" placeholder="" @change="getAll" size="default">
              <el-option v-for="item in mblist" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="开发区名称">
            <el-select v-model="form1.developArea" placeholder="" @change="getAll">
              <el-option v-for="item in kfqlist" :label="item.develop" :value="item.develop" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-for="(item, index) in list2" @click="pitchOn(item, index)" :class="active === index ? 'activeClass' : ''"
      :key="index"
      style="width: 70%;height: 120px;border-radius: 8px;border: 1px solid #d8d8d8;margin: 20px 20px 20px 40px;display: inline-block;position: relative">
      <el-checkbox v-model="item.state" label="" size="large" style="position: absolute;right: 10px" v-if="show" />
      <div style="width: 100%;height: 50px;font-size:14px;padding: 5px">
        <div style="color: #484848;margin: 5px;overflow: hidden;white-space: nowrap">{{ item.name }}({{ item.templateType }})
        </div>
        <!--        <div style="color: #858585;margin-left: 5px">{{item.info.time}}</div>-->
      </div>
      <div style="height: 50px;background: #f5f5f5;font-size:14px;padding: 5px">
        <div style="color: #484848;margin: 5px">上报时间：{{ item.updateTime }}</div>
        <div style="color: #858585;margin-left: 5px">审核时间：{{ item.checkTime }}</div>
      </div>
    </div>


  </div>
  <el-drawer v-model="drawer" title="流程" :direction="direction" :before-close="handleClose">
    <div style="width: 100%;display: inline-block;vertical-align: middle;text-align: center;min-height:90vh;">
      <div style="width: 200px;margin: 0 auto">
        <div
          style="width: 100%;height: 40px;background: rgba(24,132,252,0.1);border-radius: 4px;line-height: 40px;position: relative">
          <img style="display: inline-block;vertical-align: center;width: 20px;position: absolute;top: 10px;left: 20px"
            src="../../assets/抄送节点1.png">
          <div style="display: inline-block;margin-left: 20px;vertical-align: center">流程发起节点</div>

        </div>
      </div>
      <div style="width: 200px;margin: 0 auto" v-for="(item, index) in checkInfoList">
        <img src="../../assets/1_直线.png">
        <div :class="item.shState === '2' ? 'activeclass' : ''"
          style="width: 100%;height: 40px;background: rgba(24,132,252,0.1);border-radius: 4px;line-height: 40px;position: relative;cursor: pointer">
          <img style="display: inline-block;vertical-align: center;width: 20px;position: absolute;top: 10px;left: 20px"
            src="../../assets/流程节点备份.png">
          <div
            style="display: inline-block;margin-left: 20px;vertical-align: center;white-space: nowrap;overflow: hidden;width: 60%">
            {{ item.name }}</div>
        </div>
      </div>

      <div style="width: 200px;margin: 0 auto">
        <img src="../../assets/1_直线.png">
        <div
          style="width: 100%;height: 40px;background: rgba(24,132,252,0.1);border-radius: 4px;line-height: 40px;position: relative">
          <img style="display: inline-block;vertical-align: center;width: 20px;position: absolute;top: 10px;left: 20px"
            src="../../assets/流程结束.png">
          <div style="display: inline-block;margin-left: 20px;vertical-align: center">流程结束</div>

        </div>
      </div>
    </div>
    <!--    <span>Hi, there!</span>-->
  </el-drawer>
</div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, h } from "vue"
import {
  userGetAllUser,
  userGetNum,
  userFindByList,
  userSaveTeam,
  reportGetTodoNum,
  reportFindList,
  reportcheck,
  reportfindToDoList,
  reportfindprocessList, reportfindById, reportgetProcessNum,
  getAllTB
} from "@/util/api";
import { ElNotification, ElMessageBox } from "element-plus";
const num = ref(0)
const team = ref("")
const list: any = ref([])
const active: any = ref(-1)
const list2: any = ref([])
const id = ref("")
const show = ref(false)
const checkClass:any = ref('')
const mblist: any = ref([
  {
    name: '月报',
    id: '1'
  },
  {
    name: '季报',
    id: '2'
  },
  {
    name: '“四上”企业情况',
    id: '4'
  },
  {
    name: '年报',
    id: '3'
  },
  {
    name: '主导产品产量情况',
    id: '7'
  },
  {
    name: '工业总产值分行业情况',
    id: '6'
  },
  {
    name: '重点工业产品产量情况',
    id: '5'
  },
  {
    name: '苏陕协作“区中园”引进项目汇总台账',
    id: '100'
  },
  {
    name: '苏陕扶贫协作共建“区中园”月度工作台账',
    id: '101'
  },
  {
    name: '“区中园”项目带动贫困人口信息表',
    id: '102'
  },
])

const kfqlist: any = ref([])
const getkfq = () => {
  getAllTB("").then((res: any) => {
    kfqlist.value = res.data
  })
}

const form1: any = ref({
  name: '',
  notAll: false,
  rState: '2',
  developArea: '',
  templateType: ''
})
const checkInfoList: any = ref([])
const drawer = ref(false)
const direction = ref('rtl')
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('是否确定关闭?')
    .then(() => {
      active.value = -1
      done()
    })
    .catch(() => {
      // catch error
    })
}
import { useRouter } from "vue-router";
const router = useRouter();
const pitchOn = (arr: any, val: any) => {
  console.log(arr) 
  router.push({
    path: '/addFloder',
    query: {
      developArea:arr.developArea,
      radio1:arr.templateId,
      id:arr.id,
      userid:arr.userId
    }
  })
}

const gldelete = () => {
  show.value = true
}

const qxshow = () => {
  show.value = false
}
const audit = () => {

  let arr1 = list2.value
  let arr2: any = []
  for (let i = 0; i < arr1.length; i++) {
    if (arr1[i].state === true) {
      arr2.push(arr1[i])
    }
  }
  console.log(arr2)
  if (arr2.length > 1) {
    ElNotification({
      title: '提示',
      message: h('i', { style: 'color: teal' }, '审核只能选择一个'),
    })
    return false
  }

  console.log(list2.value)
  let data = {
    id: arr2[0].checkInfoList[0].id,
    shResult: '1'
  }
  reportcheck(data).then((res: any) => {
    getuserNum()
    getAll()

  })
}

onMounted(() => {
  getuserNum()
  getAll()
  getkfq()
})
const getAlls = (val: any) => {
  checkClass.value = val
  console.log(val)
  if (val == "") {
    form1.value = {
      name: '',
      notAll: false,

    }
  }
  if (val == "1") {
    console.log(1)
    form1.value = {
      name: '',
      notAll: true,
      createUserId: '1',
    }
  }
  if (val == "2") {
    form1.value = {
      name: '',
      notAll: true,
      rState: '2',
      // createUserId:'1'
    }
  }
  if (val == "3") {
    form1.value = {
      name: '',
      notAll: true,
      rState: '5',
    }
  }
  if (val == "4") {
    form1.value = {
      name: '',
      notAll: true,
      // rState:'5',
      chaoSongIds: '1'
    }
  }

  if (val == '5') {
    form1.value = {
      name: '',
      notAll: false,
      rState: '2',
      checkUserId: '500'
    }
  }

  // form1.rState = val
  getAll()
}

const getAll = () => {
  reportfindprocessList(form1.value).then((res: any) => {
    list2.value = res.data
    let arr = list2.value
    for (let i = 0; i < arr.length; i++) {
      arr[i].info = JSON.parse(arr[i].info)
    }
  })
}





const getuserNum = () => {
  let data: any = ''
  reportgetProcessNum(data).then((res: any) => {
    list.value = res.data
    let list1 = list.value
    for (const resKey in list1) {
      // console.log(resKey)
      // console.log(list1[resKey])
      if (!list1[resKey]) {
        list1[resKey] = 0
      }
    }

  })

}
</script>

<style scoped>
.containt{
  width: 100%;
  height: 100%;
  display: flex;
}
.activeclass {
  background: #1884FC !important;
  color: white !important;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

:deep.el-pagination {
  float: right;
  margin-right: 20px;
}

.con_left {
  width: 13%;
  height: 100%;
  background: #f5f5f5;
  vertical-align: top;
  color: #858585;
  box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.06);
}

.con_right {
  flex: 1;
  background: #fff;
  vertical-align: middle;
  display: inline-block;
  height: 100%;
  overflow-y: scroll;
}
.checks{
   width:90%;
   margin: 0 auto;
   line-height:20px;
   background-color:rgba(235, 76, 64, 0.1) ;
   padding: 5px 0;
   box-sizing: border-box;
   cursor:pointer;
   font-size:14px;
}
.nocheck{
  width:90%;
   margin: 0 auto;
   line-height:20px;
   padding: 5px 0;
   box-sizing: border-box;
   cursor:pointer;
   font-size:14px;
}
</style>
